<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赛事公布</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mycss.css"/>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            margin-left: 30%;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

    </style>
</head>
<body>
<!--Vue.js-->
<script src="/js/vue.js"></script>
<!--Element-ui-->
<script src="/js/index.js"></script>
<!--axios-->
<script src="/js/axios.min.js"></script>
<!--cookie工具-->
<script src="/js/cookie_utils.js"></script>
<!--工具-->
<script src="/js/utils.js"></script>


<div id="container">
    <el-container>
        <!--网站图片 + 用户信息-->
        <el-header height="100%">
            <el-col :span="6">
                <img class="logo" src="/img/server_html/sportLogo.jpg" style="width: 100px;height: 100px"/>
            </el-col>
            <el-col :span="9">
                <span class="campus-sports" style="margin-left: 150px;font-size: 36px;padding-top: 50px">重庆工程学院校园运动会</span>
            </el-col>
            <el-col :span="6" :offset="12" style="display: flex; align-items: center; justify-content: flex-end;">
                <br>
                <!--个人用户信息-->
                <el-dropdown>
                    <span class="no-attention move-bottom-mini-mini" style="font-size: 20px">
                                用户:&nbsp;
                        <el-button type="text"  icon="el-icon-arrow-down" style="font-size: 20px;margin-right: 20px">{{user.username}}</el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <el-button @click="myIndex" style="width: 100px;text-align: center;border: none;font-size: 15px">主页</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="logout" style="width: 100px;text-align: center;border: none;font-size: 15px">注销</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--头像-->
                <el-col :span="6" :offset="0">
                    <el-avatar :src="user.userHeadUrl"></el-avatar>
                </el-col>
            </el-col>
        </el-header>

        <el-main>
            <el-col :span="10" :offset="1">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>您的基本个人信息</span>
                    </div>
                    <div>
                        <el-tag>用户名</el-tag>
                        {{this.username}}
                        <br>
                        <br>
                        <el-tag>身份</el-tag>
                        <span v-if="this.type == '0'">
                            学生
                        </span>
                        <span v-else-if="this.type == '1'">
                            班级老师
                        </span>
                        <span v-else-if="this.type == '2'">
                            裁判
                        </span>
                        <span v-else-if="this.type == '3'">
                            校内工作人员
                        </span>
                        <span v-else>
                            非本校人员
                        </span>
                        <br>
                        <br>
                        <el-tag>邮箱</el-tag>
                        {{this.email}}
                        <br>
                        <br>

                        <el-tag>电话号码</el-tag>
                        {{this.phoneNumber}}
                        <br>
                        <br>

                        <el-tag>性别</el-tag>
                        <span v-if="this.gender == '1'">
                            男
                        </span>
                        <span v-else>
                            女
                        </span>
                        <br>
                        <br>

                        <el-tag>出生日期</el-tag>
                        {{this.birthday}}
                        <br>
                        <br>

                        <el-tag>运动会编号</el-tag>
                        <span v-if="this.number != null">
                            {{this.number}}
                        </span>
                        <span v-else>
                            暂未参赛
                        </span>

                        <br>
                        <br>

                    </div>
                </el-card>
            </el-col>

            <el-col :span="8" :offset="3">
                <center>
                    <el-select v-model="changeSelect" placeholder="请选择更改需求">
                        <el-option label="更改用户名" value="username"></el-option>
                        <el-option label="更改邮箱地址" value="email"></el-option>
                        <el-option label="更改密码" value="password"></el-option>
                        <el-option label="更改联系电话" value="phonenumber"></el-option>
                        <el-option label="更换头像" value="image"></el-option>
                    </el-select>

                </center>
                <br>
                <br>

                <!--更改用户名-->
                <el-card class="box-card" v-if="changeSelect == 'username'">
                    <div slot="header" class="clearfix">
                        <span>更改用户名</span>
                    </div>
                    <div>

                        <el-input
                                placeholder="请输入新的用户名"
                                v-model="userInput"
                                clearable>
                        </el-input>
                        <br>
                        <br>
                        <center>
                            <el-button @click="changeBtn" type="primary">提交</el-button>
                        </center>
                    </div>
                </el-card>


                <!--更改邮箱地址-->
                <el-card class="box-card" v-if="changeSelect == 'email'">
                    <div slot="header" class="clearfix">
                        <span>更改邮箱地址</span>
                    </div>
                    <div>
                        <el-input
                                placeholder="请输入新的邮箱地址"
                                v-model="userInput"
                                clearable>
                        </el-input>
                        <br>
                        <br>
                        <center>
                            <el-button @click="changeBtn" type="primary">提交</el-button>
                        </center>
                    </div>
                </el-card>

                <!--更改密码-->
                <el-card class="box-card" v-if="changeSelect == 'password'">
                    <div slot="header" class="clearfix">
                        <span>更改密码</span>
                    </div>
                    <div>
                        <el-input show-password
                                placeholder="请输入新的密码"
                                v-model="userInput"
                                clearable>
                        </el-input>
                        <br>
                        <br>
                        <el-input show-password
                                placeholder="请重复输入新密码"
                                v-model="reuserInput"
                                clearable>
                        </el-input>
                        <br>
                        <br>
                        <center>
                            <el-button @click="changeBtn" type="primary">提交</el-button>
                        </center>
                    </div>
                </el-card>
                <!--更改联系电话-->
                <el-card class="box-card" v-if="changeSelect == 'phonenumber'">
                    <div slot="header" class="clearfix">
                        <span>更改联系电话</span>
                    </div>
                    <div>

                        <el-input
                                placeholder="请输入新的联系电话"
                                v-model="userInput"
                                clearable>
                        </el-input>
                        <br>
                        <br>
                        <center>
                            <el-button @click="changeBtn" type="primary">提交</el-button>
                        </center>
                    </div>
                </el-card>
                <!-- 更换头像-->
                <el-card class="box-card" v-if="changeSelect == 'image'">
                    <div slot="header" class="clearfix">
                        <span>更换头像</span>
                    </div>
                    <template>
                        <el-alert
                            title="温馨提示：点击即可修改图片，只允许上传.jpg格式   **非必选**"
                            type="warning"
                            :closable="false">
                        </el-alert>
                    </template>
                    <div>
                            <el-upload
                                class="avatar-uploader"
                                action="#"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        <br>
                        <br>
                        <center>
                            <el-button @click="changeBtn" type="primary">提交</el-button>
                        </center>
                    </div>
                </el-card>

            </el-col>



        </el-main>

        <el-footer class="foot">
            <br>
            <br>
            &copy;2023 by 第三组
        </el-footer>
    </el-container>


</div>

</body>
</html>

<script>
    //登录验证
    if (getCookieValue("token") == null || getCookieValue("token").length === 0) {
        window.location.href = 'login.html?reason=nologin';
    }
</script>


<script>
    var baseUrl = "http://localhost:8080/client/";
    var vm = new Vue({
        el: '#container',
        data: {
            user: {
                userId: '',
                username: '',
                userHeadUrl: '',
                type: '',
                typeId: '',
                token: ''
            },
            username: '',
            email: '',
            password: '',
            rePassword: '',
            phoneNumber: '',
            gender: '',
            number: '',
            birthday:'',
            info: {},
            img:'',
            changeSelect: '',
            userInput: '',
            reuserInput: '',
            imageUrl: '',
            form:{
                avatar:'',
            }
        },

        created: function () {
            this.user.token = getCookieValue("token")
            axios({
                method: 'get',
                url: baseUrl + 'user/getLoginUserInfo' + '/' + this.user.token,
            }).then((res)=>{
                this.user.userId = res.data.data.userId;
                this.user.username = res.data.data.username;
                this.user.userHeadUrl = '/img/user_upload/' + res.data.data.img;
                this.user.gender = res.data.data.gender;
                this.user.type = res.data.data.type;
                this.user.typeId = res.data.data.typeId;
                console.log(this.user.userId)
                //
                this.getUserInfo();
            });

        },

        methods: {
            getUserInfo(){
                axios({
                    method: 'get',
                    url: baseUrl + "user/myInfo",
                    params: {
                        userId: this.user.userId,
                        type:this.user.type,
                        typeId:this.user.typeId,
                        token: this.user.token
                    }
                }).then((res)=>{
                    this.info = res.data.data;
                    this.user.userHeadUrl = '/img/user_upload/' + this.info.img;
                    this.type = this.info.type;
                    this.typeId = this.info.typeId;
                    this.userId = this.info.userId;
                    this.user.username = this.info.username
                    this.username = this.info.username;
                    this.email = this.info.email;
                    this.phoneNumber = this.info.phoneNumber;
                    this.gender = this.info.gender;
                    this.birthday = this.info.birthday;
                    this.number = this.info.other;
                });
            },
            changeBtn() {
                if (this.changeSelect === 'image'){
                    this.userInput = this.img;
                }
                //验证输入内容是否为空
                if (this.userInput.length === 0) {
                    this.$alert('请在输入框中输入内容', '更改失败', {
                        confirmButtonText: '确定',
                    });
                    return;
                }

                //若为修改密码，需要验证两次密码是否一致
                if (this.changeSelect === 'password') {
                    if (this.userInput !== this.reuserInput) {
                        this.$alert('两次密码输入不一致', '更改失败', {
                            confirmButtonText: '确定',
                        });
                        return;
                    }
                }
                axios({
                    method: 'put',
                    url: baseUrl + 'user/update',
                    data: {
                        userId: this.userId,
                        type: this.type,
                        typeId: this.typeId,
                        changeType: this.changeSelect,
                        value: this.userInput,
                        token :this.user.token
                    }
                }).then((res)=>{
                    // console.log(res.data);
                    if (res.data.code === 200){
                        if (this.changeSelect === 'username' ) {
                            this.user.username = this.userInput;
                        }
                        if (this.changeSelect === 'image'){
                            this.user.userHeadUrl = '/img/user_upload/' + this.userInput;
                        }
                        this.$alert('更改成功', '更改成功', {
                            confirmButtonText: '确定',
                        });
                        this.userInput = '';
                        this.form.avatar = '';
                        this.img = '';
                        this.getUserInfo();
                    }else {
                        this.$notify({
                            title: '警告',
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            myIndex() {
                window.location.href = baseUrl + "system/toIndex";
            },
            logout() {
                axios({
                    method: 'post',
                    url: baseUrl + 'user/logout',
                    data: {
                        token: this.user.token,
                    },
                }).then((res)=>{
                    setCookieValue("token", "");
                    window.location.href = baseUrl + 'system/toLogin'
                });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                const fileData = new FormData();
                fileData.append("img", file);
                axios({
                    method: 'put',
                    url: baseUrl + 'file/upload',
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    data: fileData
                }).then(response => {
                    if (response.data.code === 200){
                        this.img = response.data.data;
                        this.imageUrl = "/img/user_upload/" + response.data.data;
                        this.$set(this.form, "avatar", this.imageUrl);
                        // this.user.userHeadUrl = response.data.img;
                    }else{
                        this.$notify({
                            title: '警告',
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                    })
                    .catch(error => {
                        console.error(error);
                    });
                //阻止传到本地浏览器
                return false;
            }
        }
    });
</script>
